"use client";

// 导入RoomProvider组件和相关数据类型，用于创建和管理一个房间的状态
import { RoomProvider } from "@/liveblocks.config";
import {ReactNode} from "react"
import { Layer } from "@/types/canvas";
import { LiveList, LiveMap, LiveObject } from "@liveblocks/client";
import { ClientSideSuspense } from "@liveblocks/react";
import React from "react";

// 定义Room组件的属性接口
interface RoomProps {
  children: React.ReactNode; // 子组件内容
  roomId: string; // 房间的唯一标识符
  fallback: NonNullable<React.ReactNode> | null; // 在组件加载期间显示的占位内容
}

/**
 * Room组件，用于封装一个房间内的所有功能和状态管理
 * @param {RoomProps} props - 组件的属性对象
 * @returns React元素，封装了RoomProvider和ClientSideSuspense组件
 */
export const Room = ({ children, roomId, fallback }: RoomProps) => {
  return (
    // 使用RoomProvider组件创建一个房间，提供房间的初始状态和存储
    <RoomProvider
      id={roomId}
      initialPresence={{
        cursor: null, // 初始光标状态
        selection: [], // 初始选择状态
        pencilDraft: null, // 初始铅笔草稿状态
        pencilColor: null, // 初始铅笔颜色状态
      }}
      initialStorage={{
        layers: new LiveMap<string, LiveObject<Layer>>(), // 初始图层存储，使用LiveMap管理
        layerIds: new LiveList<string>(), // 初始图层ID列表，使用LiveList管理
      }}
    >
{      // 使用ClientSideSuspense组件处理子组件的异步加载，提供占位内容
}      <ClientSideSuspense fallback={fallback}>
        {() => children}
      </ClientSideSuspense>
    </RoomProvider>
  );
};